<template>
	<view class="account">
		<view class="topDiv">
			<view class="userDiv">
				<!-- 已登录效果 -->
				<view v-if="loginData.userName!=null">
					<view class="userPhoto">
						<u-avatar :src="loginData.src"></u-avatar>
					</view>
					<h1 class="userTitle">{{ loginData.userName }}</h1>
					<h4 class="userSubTile">会员id：{{ loginData.uid }}</h4>
				</view>
				<!-- 未登录 -->
				<view v-else style="padding: 15px;box-sizing: border-box;">
					<u-button type="success" shape="circle" text="点击授权微信登录" @click="giveUserLogin"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 登录用户数据
				loginData:{
					userName:null,
					src:"https://cdn.uviewui.com/uview/album/1.jpg",
					uid:"58811919726"
				}
			}
		},
		methods:{
			// 点击登录
			giveUserLogin(){
				var _this = this;
				uni.getUserProfile({
					desc:"授权微信登录app",
					success(res) {
						_this.loginData.userName = res.userInfo.nickName;
						_this.loginData.src = res.userInfo.avatarUrl;
					}
				})
			}
		}
	}
</script>

<style scoped>
.topDiv{
	width: 100vw;
	height: 350upx;
	background-color: rgb(254,200,13);
	display: flex;
	justify-content: center;
	position: relative;
}
.userDiv{
	width: 80vw;
	height: 250upx;
	background-color: #FFF;
	border-radius: 8upx;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	position: absolute;
	top: 200upx;
	text-align: center;
}
.userTitle{
	font-size: 35upx;
	margin-top: 10upx;
}
.userSubTile{
	color: #a7a7a7;
	font-size: 25upx;
	margin-top: 10upx;
}
.userPhoto{
	display: flex;
	justify-content: center;
	margin-top: 10upx;
	
}
</style>